<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">{{operation | translate}}(ID:{{tariff.id}})</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-sm-4 b-r">
                <form method="get" class="form-horizontal">
                    <div class="form-group"><label class="col-sm-5 control-label">{{'SETTING.TARIFF_NAME' | translate}}</label>
                        <div class="col-sm-7"><input ng-model="tariff.name" type="text" class="form-control"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-5 control-label">{{'SETTING.CATEGORY' | translate}}</label>
                        <div class="col-sm-7">
                            <ui-select ng-model="tariff.energy_category.id" theme="bootstrap" required>
                                <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                                <ui-select-choices repeat="category.id as category in categories | filter: $select.search">
                                    <div ng-bind-html="category.name | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-5 control-label">{{'SETTING.TARIFF_TYPE' | translate}}</label>
                        <div class="col-sm-7">
                            <select ng-disabled="disable"  ng-model="tariff.tariff_type" class="form-control m-b" name="tariff">
                                <option value="timeofuse" selected>{{'SETTING.TIMEOFUSE' | translate}} </option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-5 control-label">{{'SETTING.UNIT' | translate}}</label>
                        <div class="col-sm-7"><input ng-model="tariff.unit_of_price" type="text" class="form-control"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-5 control-label">{{'SETTING.TARIFF_VALID_FROM' | translate}}</label>
                        <div class="col-sm-7">
                            <input date-range-picker class="form-control date-picker" type="text" ng-model="tariff.valid_from" options="dtOptions"
                            placeholder="{{'SETTING.SELECT_DATE' | translate}}" readonly="" />
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-5 control-label">{{'SETTING.TARIFF_VALID_THROUGH' | translate}}</label>
                        <div class="col-sm-7">
                            <input date-range-picker class="form-control date-picker" type="text" ng-model="tariff.valid_through" options="dtOptions"
                            placeholder="{{'SETTING.SELECT_DATE' | translate}}" readonly="" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-8">
                <table id="touTable" ng-show="tariff.tariff_type=='timeofuse'" class="footable table table-bordered table-hover" data-sort="false" data-page-size="10" >
                    <thead>
                        <tr>
                            <th class="text-center">{{'SETTING.TIME_OF_USE_START_TIME' | translate}}</th>
                            <th class="text-center">{{'SETTING.TIME_OF_USE_END_TIME' | translate}}</th>
                            <th class="text-center">{{'SETTING.PEAK_TYPE' | translate}}</th>
                            <th class="text-center">{{'SETTING.PRICE' | translate}}</th>
                            <th class="text-center">{{'SETTING.ACTION' | translate}}</th>
                        </tr>
                        <tr>
                            <td class="text-center sm">
                                <div>
                                    <select ng-model="t.start_hour" style="background-color: #FFF; border-radius:4px;border:1px solid">
                                        <option value="00">00</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                    </select>
                                    :
                                    <select ng-model="t.start_min" style="background-color: #FFF; border-radius:4px;border:1px solid">
                                        <option value="00">00</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                        <option value="32">32</option>
                                        <option value="33">33</option>
                                        <option value="34">34</option>
                                        <option value="35">35</option>
                                        <option value="36">36</option>
                                        <option value="37">37</option>
                                        <option value="38">38</option>
                                        <option value="39">39</option>
                                        <option value="40">40</option>
                                        <option value="41">41</option>
                                        <option value="42">42</option>
                                        <option value="43">43</option>
                                        <option value="44">44</option>
                                        <option value="45">45</option>
                                        <option value="46">46</option>
                                        <option value="47">47</option>
                                        <option value="48">48</option>
                                        <option value="49">49</option>
                                        <option value="50">50</option>
                                        <option value="51">51</option>
                                        <option value="50">52</option>
                                        <option value="53">53</option>
                                        <option value="54">54</option>
                                        <option value="55">55</option>
                                        <option value="56">56</option>
                                        <option value="57">57</option>
                                        <option value="58">58</option>
                                        <option value="59">59</option>
                                    </select>
                                    :
                                    <select ng-model="t.start_second" style="background-color: #FFF; border-radius:4px;border:1px solid">
                                        <option value="00">00</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                        <option value="32">32</option>
                                        <option value="33">33</option>
                                        <option value="34">34</option>
                                        <option value="35">35</option>
                                        <option value="36">36</option>
                                        <option value="37">37</option>
                                        <option value="38">38</option>
                                        <option value="39">39</option>
                                        <option value="40">40</option>
                                        <option value="41">41</option>
                                        <option value="42">42</option>
                                        <option value="43">43</option>
                                        <option value="44">44</option>
                                        <option value="45">45</option>
                                        <option value="46">46</option>
                                        <option value="47">47</option>
                                        <option value="48">48</option>
                                        <option value="49">49</option>
                                        <option value="50">50</option>
                                        <option value="51">51</option>
                                        <option value="50">52</option>
                                        <option value="53">53</option>
                                        <option value="54">54</option>
                                        <option value="55">55</option>
                                        <option value="56">56</option>
                                        <option value="57">57</option>
                                        <option value="58">58</option>
                                        <option value="59">59</option>
                                    </select>
                                </div>
                            </td>
                            <td class="text-center sm">
                                <div>
                                    <select ng-model="t.end_hour" style="background-color: #FFF; border-radius:4px;border:1px solid" >
                                        <option value="00">00</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                    </select>
                                    :
                                    <select ng-model="t.end_min" style="background-color: #FFF; border-radius:4px;border:1px solid">
                                        <option value="00">00</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                        <option value="32">32</option>
                                        <option value="33">33</option>
                                        <option value="34">34</option>
                                        <option value="35">35</option>
                                        <option value="36">36</option>
                                        <option value="37">37</option>
                                        <option value="38">38</option>
                                        <option value="39">39</option>
                                        <option value="40">40</option>
                                        <option value="41">41</option>
                                        <option value="42">42</option>
                                        <option value="43">43</option>
                                        <option value="44">44</option>
                                        <option value="45">45</option>
                                        <option value="46">46</option>
                                        <option value="47">47</option>
                                        <option value="48">48</option>
                                        <option value="49">49</option>
                                        <option value="50">50</option>
                                        <option value="51">51</option>
                                        <option value="50">52</option>
                                        <option value="53">53</option>
                                        <option value="54">54</option>
                                        <option value="55">55</option>
                                        <option value="56">56</option>
                                        <option value="57">57</option>
                                        <option value="58">58</option>
                                        <option value="59">59</option>
                                    </select>
                                    :
                                    <select ng-model="t.end_second" style="background-color: #FFF; border-radius:4px;border:1px solid">
                                        <option value="00">00</option>
                                        <option value="01">01</option>
                                        <option value="02">02</option>
                                        <option value="03">03</option>
                                        <option value="04">04</option>
                                        <option value="05">05</option>
                                        <option value="06">06</option>
                                        <option value="07">07</option>
                                        <option value="08">08</option>
                                        <option value="09">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                        <option value="32">32</option>
                                        <option value="33">33</option>
                                        <option value="34">34</option>
                                        <option value="35">35</option>
                                        <option value="36">36</option>
                                        <option value="37">37</option>
                                        <option value="38">38</option>
                                        <option value="39">39</option>
                                        <option value="40">40</option>
                                        <option value="41">41</option>
                                        <option value="42">42</option>
                                        <option value="43">43</option>
                                        <option value="44">44</option>
                                        <option value="45">45</option>
                                        <option value="46">46</option>
                                        <option value="47">47</option>
                                        <option value="48">48</option>
                                        <option value="49">49</option>
                                        <option value="50">50</option>
                                        <option value="51">51</option>
                                        <option value="50">52</option>
                                        <option value="53">53</option>
                                        <option value="54">54</option>
                                        <option value="55">55</option>
                                        <option value="56">56</option>
                                        <option value="57">57</option>
                                        <option value="58">58</option>
                                        <option value="59">59</option>
                                    </select>
                                </div>
                            </td>
                            <td class="text-center sm">
                                <select ng-model="t.peak_type" class="form-control  input-sm sm" name="peak">
                                <option value="toppeak">{{'COMMON.TARIFF.TOPPEAK' | translate}}</option>
                                <option value="onpeak">{{'COMMON.TARIFF.ONPEAK' | translate}}</option>
                                <option value="offpeak">{{'COMMON.TARIFF.OFFPEAK' | translate}}</option>
                                <option value="midpeak">{{'COMMON.TARIFF.MIDPEAK' | translate}}</option>
                            </select>
                            </td>
                            <td class="text-center sm">
                                <input type="number" min="0" step="0.00001" ng-model="t.price" class="form-control input-sm">
                            </td>

                            <td class="text-center sm">
                                <a class="btn btn-primary btn-rounded btn-xs" ng-click="add(t)" >{{'SETTING.ADD' | translate}}</a>
                            </td>
                        </tr>
                    </thead>
                    <tbody>

                        <tr ng-repeat="tou in timeofuse">
                            <td class="text-center sm">{{ tou.start_time_of_day }}</td>
                            <td class="text-center sm">{{ tou.end_time_of_day }}</td>
                            <td class="text-center sm">{{ showPeakType(tou.peak_type) | translate }}</td>
                            <td class="text-center sm">{{ tou.price }}</td>
                            <td class="text-center sm">
                                <a ng-click="delete($index)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="hide-if-no-paging">
                    <tr>
                        <td colspan="7">
                            <ul class="pagination pull-right"></ul>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">{{'SETTING.CANCEL' | translate}}</button>
        <button type="button" ng-disabled="!(tariff.tariff_type === 'timeofuse' && tariff.name && tariff.energy_category.id && tariff.unit_of_price && timeofuse.length > 0)" class="btn btn-primary" ng-click="ok()">{{'SETTING.SAVE' | translate}}</button>
    </div>
</div>
